import React from 'react';
import {List,Image} from 'antd-mobile'

import { useNavigate } from 'react-router-dom'

const ProList = (props) => {

  // navigate 就像 router 一样
  const navigate = useNavigate()

  return (
    <List header='商品列表'>
      {props.proList && props.proList.map(item => {
        return (<List.Item
        key={item.proid}
        prefix={<Image width={80} height={80} src={item.img1} />}
        onClick={()=>{
          // console.log('被点击了', item.proid);
          navigate('/detail/' + item.proid, {state: { a: 123, b: '你好', proid: item.proid }})
        }}
        >
            <p style={{fontSize: 14}}>
              {item.proname}
            </p>
        </List.Item>)
      })}
  </List>
  );
};

export default ProList;
